import {h, ref} from "../../lib/guide-mini-vue.esm.js";


//region 1.左侧的对比
// （a b）c
// （a b）d e
// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C'}, "C")
// ];
// const nextChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'E'}, "E")
// ];
// endregion


// region 2.右侧的对比
// （a b）c
// （a b）d e
// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C'}, "C")
// ];
// const nextChildren = [
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'E'}, "E"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C'}, "C")
// ];
// endregion


//region 3.新的比老的长,右侧的对比
// （a b）
// （a b）c
// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
// ];
// const nextChildren = [
//     h("p", {key: 'C'}, "C"),
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
// ];
// endregion

// region 4.新的比老的长,右侧
// （a b）c
// （a b）
// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C'}, "C"),
// ];
// const nextChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
// ];
// endregion

// c d（a b）
//    （a b）
//  region 新的比老的长,、左侧
// i = 0,e1=1,e2=-1
//

// const prevChildren = [
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'C'}, "C"),
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
// ];
// const nextChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
// ];
// endregion


// region 5.对比中间的部分
// 删除老的，（在；老的里面存在，新的里面不存在。）
// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C', id: 'c-prev'}, "C"),
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'F'}, "F"),
//     h("p", {key: 'G'}, "G"),
// ];
// const nextChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'E'}, "E"),
//     h("p", {key: 'C', id: 'c-next'}, "C"),
//     h("p", {key: 'F'}, "F"),
//     h("p", {key: 'G'}, "G"),
// ];
// endregion

// region 6.需要移动

// const prevChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'C'}, "C"),
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'E'}, "E"),
//     h("p", {key: 'F'}, "F"),
//     h("p", {key: 'G'}, "G"),
// ];
// const nextChildren = [
//     h("p", {key: 'A'}, "A"),
//     h("p", {key: 'B'}, "B"),
//     h("p", {key: 'E'}, "E"),
//     h("p", {key: 'C'}, "C"),
//     h("p", {key: 'D'}, "D"),
//     h("p", {key: 'F'}, "F"),
//     h("p", {key: 'G'}, "G"),
// ];

// endregion

// region 7 创建新元素
const prevChildren = [
    h("p", {key: 'A'}, "A"),
    h("p", {key: 'B'}, "B"),
    h("p", {key: 'C'}, "C"),
    h("p", {key: 'E'}, "E"),
    h("p", {key: 'F'}, "F"),
    h("p", {key: 'G'}, "G"),
];
const nextChildren = [
    h("p", {key: 'A'}, "A"),
    h("p", {key: 'B'}, "B"),
    h("p", {key: 'E'}, "E"),
    h("p", {key: 'C'}, "C"),
    h("p", {key: 'D'}, "D"),
    h("p", {key: 'F'}, "F"),
    h("p", {key: 'G'}, "G"),
];


// @formatter:off
export default {
    name: "ArrayToArray",
    render() {
        const self = this;
        return self.isChange === true
            ? h("div", {}, nextChildren)
            : h("div", {}, prevChildren)

    },
    setup() {
        const isChange = ref(false);
        window.isChange = isChange;
        return {
            isChange
        }
    }
}